@import 'vars.styl'
.datepicker *
  box-sizing: border-box
  font-size: 14px

.datepicker
  position: absolute
  top: 0
  left: 0
  display: none
  padding: 10px
  border: 1px solid #ccc
  background: #fff
  z-index: z-index-datepicker

.datepicker .top
  text-align: center

.datepicker .body
  width: 100%
  border-spacing: 0

.datepicker .bottom
  padding: 8px 0 5px
  text-align: center

.datepicker .cell
  width: 40px
  height: 36px
  text-align: center
  cursor: pointer

.datepicker .cell.selected div,
.datepicker-select-options li.selected
  color: #fff;
  background: #007fc3;

.datepicker .cell div
  display block;
  margin: 1px;
  width: 38px;
  height: 34px;
  line-height: 34px;

.datepicker .week-cell
  height: 40px
  border: 0
  color: #888

.datepicker .prev-month,
.datepicker .next-month
  color: #c7c7c7

.datepicker .curr-month
  color: #333

.datepicker .prev-month:hover div,
.datepicker .curr-month:hover div,
.datepicker .next-month:hover div
  color: #fff;
  background: #007fc3;

.datepicker .btn-ok
  display: inline-block
  width: 80px
  height: 30px
  line-height: 30px
  text-align: center
  color: #fff
  background: #007FC3
  cursor: pointer

.datepicker-select
  position: relative
  float: left
  width: 50%

.datepicker-select:after
  position: absolute
  top: 50%
  right: 10px
  width: 0
  height: 0
  margin-top: -2.5px
  border-top: 5px solid #aaa
  border-left: 5px solid transparent
  border-right: 5px solid transparent
  content: ''

.datepicker-select-selected
  position: relative
  width: 100%
  height: 36px
  padding-right: 20px
  line-height: 36px
  text-align: center
  color: #333
  border: 1px solid #ddd
  cursor: pointer

.datepicker-select-options
  position: absolute
  top: 35px
  left: 0
  display: none
  width: 100%
  max-height: 212px
  overflow: auto
  margin: 0
  padding: 0
  border: 1px solid #ddd
  background: #fff
  z-index: 9
  box-shadow: 0 4px 8px #e5e5e5
  -webkit-box-shadow: 0 4px 8px #e5e5e5

.datepicker-select-options li
  float: left
  width: 50%
  height: 30px
  line-height: 30px
  color: #777
  font-size: 13px
  text-align: center
  list-style: none
  cursor: pointer

.datepicker-select-options li:hover
  background: #eee

.datepicker-select-month
  margin-left: -1px

